<template>
  <el-menu  :collapse="collapsed" :default-active="$route.path" collapse-transition router unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ff0">
    <div class="logobox">
      <img class="logoimg" src="../../assets/images/tea.png" alt="">
    </div>
    <!-- 一级菜单 -->
    <template v-for="item in lists">
     <el-submenu v-if="item.children && item.children.length" :index="item.name" :key="item.path">
      <template slot="title"><i class="iconfont" v-if="item.id == 1">&#xe643;</i><i class="iconfont" v-else >&#xe606;</i><span>{{item.name}}</span></template>
      <!-- 二级菜单 -->
       <template v-for="itemChild in item.children">
         <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.name" :key="itemChild.path">
             <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.name}}</span></template>
            <!-- 三级菜单 -->
         <template v-for="itemChild_Child in itemChild.children">
           <el-submenu v-if="itemChild_Child.children && itemChild_Child.children.length" :index="itemChild_Child.name"    :key="itemChild_Child.path">
             <template slot="title"><i :class="itemChild_Child.icon"></i><span>{{itemChild_Child.name}}</span></template>
             <!-- 四级菜单 -->
              <el-menu-item v-for="itemChild_Child_Child in itemChild_Child.children" :index="itemChild_Child_Child.path" :key="itemChild_Child_Child.path">
               <i :class="itemChild_Child_Child.icon"></i><span slot="title">{{itemChild_Child_Child.name}}</span></el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="'/'+itemChild_Child.path" :key="itemChild_Child.path"><i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.name}}</span></el-menu-item>
         </template>
         </el-submenu>
        <el-menu-item v-else :index="'/'+itemChild.path" :key="itemChild.path"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.name}}</span></el-menu-item>
      </template>
    </el-submenu>
    <el-menu-item v-else :index="'/'+item.path" :key="item.path"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item>
  </template>
  </el-menu>
</template>

<script>

export default {
  name: 'leftnav',
  data () {
    return {
      collapsed: false,
      lists: []
    }
  },
  created () {
    const res = {
      data: [
        {
          id: '1',
          name: '教室管理',
          path: 'manageClass',
          children: [
            {
              icon: '',
              name: '全部教室',
              path: 'manageClass/allRoomsInfo'
            },
            {
              icon: '',
              name: '可用教室',
              path: 'manageClass/useableRoomInfo'
            }
          ]
        },
        {
          id: '2',
          name: '考试管理',
          path: 'manageExam',
          children: [
            {
              icon: '',
              name: '考试考生信息',
              path: 'addExam',
              children: [
                {
                  icon: '',
                  name: '考试信息管理',
                  path: 'manageExamInfo'
                },
                {
                  icon: '',
                  name: '专业信息管理',
                  path: 'manageMajorInfo'
                },
                {
                  icon: '',
                  name: '考生信息管理',
                  path: 'manageStuInfo'
                }
              ]
            },
            {
              icon: '',
              name: '考场信息',
              path: 'modiExamInfo',
              children: [
                {
                  icon: '',
                  name: '查看考场信息',
                  path: 'checktPlaceInfo'
                }
              ]
            }
          ]
        }
      ]
    }
    this.lists = res.data
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = value
    })
  },
  methods: {
  },
  computed: {
    defaultActive () {
      return '/' + this.$route.path.split('/').reverse()[0]
    }
  }
}
</script>

<style lang="stylus" scoped>
span
 font-size : 18px
.el-menu-vertical-demo:not(.el-menu--collapse)
  width: 240px
  min-height: 400px
.el-menu-vertical-demo:not(.el-menu--collapse)
  border: none
  text-align: left
.el-menu-item-group__title
  padding: 0px
/deep/.el-menu-item span
  font-size : 15px
.el-menu-bg
  background-color: #1f2d3d !important
.el-menu
  border: none
.logobox
  height: 100px
  line-height: 40px
  color: #9d9d9d
  font-size: 20px
  text-align: center
  padding: 15px 0px
.logoimg
  border-radius : 50%
  height: 50px
.iconfont
 font-size : 22px
 color : #fff
 padding-right : 10px
</style>
